<template>
  <div class='container'>
    <el-row>
      <el-col :span="24">
        <div class="grid-title bg-purple-dark">
          试题录入
        </div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <div class="grid-content bg-purple-dark">
          <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="学科:" prop="subjectID">
              <el-select v-model="ruleForm.subjectID" placeholder="请选择学科" class="select-form-all">
                <el-option v-for="obj,index in getedForm.subject" :key="index" :label="obj.label" :value="obj.value"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="目录:" prop="catalogID">
              <el-select class="select-form-all" v-model="ruleForm.catalogID" placeholder="请选择目录">
                <el-option v-for="obj,index in getedForm.catalog" :key="index" :label="obj.label" :value="obj.value"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="企业:" prop="enterpriseID">
              <el-select class="select-form-all" v-model="ruleForm.enterpriseID" placeholder="请选择企业">
                <el-option v-for="obj,index in getedForm.shortName" :key="index" :label="obj.shortName" :value="obj.id"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="城市:" class="select-form-item is-required" :hide-required-asterisk="true">
              <el-col :span="11">
                <el-form-item prop="province" label-width="-100px">
                  <el-select class="select-form-one" @change="setProvince" v-model="ruleForm.province" placeholder="请选择城市">
                    <el-option v-for="obj,index in getedForm.province" :key="index" :label="obj" :value="obj"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="11">
                <el-form-item prop="city" label-width="-10px">
                  <el-select class="select-form-one" v-model="ruleForm.city" placeholder="请选择地区">
                    <el-option v-for="obj,index in getedForm.city" :key="index" :label="obj" :value="obj"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-form-item>
            <el-form-item label="方向:" prop="direction">
              <el-select class="select-form-all" v-model="ruleForm.direction" placeholder="请选择方向">
                <el-option v-for="obj,index in getedForm.direction" :key="index" :label="obj" :value="obj"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="题型:" prop="questionType">
              <el-radio-group v-model="ruleForm.questionType">
                <el-radio label="1">单选</el-radio>
                <el-radio label="2">多选</el-radio>
                <el-radio label="3">简答</el-radio>
              </el-radio-group>

            </el-form-item>
            <el-form-item label="难度:" prop="difficulty">
              <el-radio v-model="ruleForm.difficulty" label="1">简单</el-radio>
              <el-radio v-model="ruleForm.difficulty" label="2">一般</el-radio>
              <el-radio v-model="ruleForm.difficulty" label="3">困难</el-radio>
            </el-form-item>
            <el-form-item label="题干:" prop="question" class="form-item-Class">
              <quill-editor class="quillEditorClass" v-model="ruleForm.question"></quill-editor>
            </el-form-item>
            <el-form-item v-if="ruleForm.questionType !== '3'" label="选项:">
              <div v-for="obj,index in ruleForm.options" :key="index">
                <el-radio v-if="ruleForm.questionType === '1'" class="elmmentRadio" v-model="questionType" :label="index">{{ obj.code + ':' }}</el-radio>
                <el-checkbox v-else v-model="obj.isRight" :label="obj.code + ':'" />
                <el-input class="elmmentInput" v-model="obj.title"></el-input>
                <ImageUpload class="avatar-uploader" @uodataUrl="uodataUrl($event,index)"></ImageUpload>
                <!-- <el-upload class="avatar-uploader" action="https://yazo-1309193103.cos.ap-beijing.myqcloud.com" :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
                  <img v-if="obj.img" :src="obj.img" class="avatar">
                  上传图片
                </el-upload> -->
              </div>

              <el-button :disabled="ruleForm.questionType === '1'" type="primary" plain @click="addQuestionType">+增加选项与答案</el-button>

            </el-form-item>
            <el-form-item label="解析视频:" prop="">
              <el-input class="select-form-all" v-model="ruleForm.videoURL"></el-input>
            </el-form-item>
            <el-form-item label="答案解析:" prop="answer" class="form-item-Class">
              <quill-editor class="quillEditorClass" v-model="ruleForm.answer"></quill-editor>
            </el-form-item>
            <el-form-item label="题目备注:" prop="">
              <textarea id="" cols="50" rows="5" v-model="ruleForm.remarks"></textarea>
            </el-form-item>
            <el-form-item label="试题标签:" prop="tags">
              <el-select @change="setTags" class="select-form-all" v-model="tags" multiple filterable allow-create default-first-option placeholder="请选择试题标签">
                <el-option v-for="obj,index in getedForm.tags" :key="index" :label="obj.label" :value="obj.label"></el-option>
              </el-select>
              <!-- <el-select class="select-form-all" v-model="ruleForm.tags" placeholder="请选择试题标签">
                <el-option v-for="obj,index in getedForm.tags" :key="index" :label="obj.label" :value="obj.value"></el-option>
              </el-select> -->
            </el-form-item>
            <el-form-item>
              <el-button type="primary" plain @click="submitForm">确认修改</el-button>
            </el-form-item>

          </el-form>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
// 学科列表
import { add as addQuestionsAPI } from '@/api/hmmm/questions.js'
import { simple as simpleSubjectsAPI } from '@/api/hmmm/subjects'
import { list as listCompanysAPI } from '@/api/hmmm/companys.js'
import { simple as simpleDirectorysAPI } from '@/api/hmmm/directorys.js'
import { provinces, citys } from '../../api/hmmm/citys'
import { simple as simpleTagsAPI } from '@/api/hmmm/tags.js'
import { direction } from '@/api/hmmm/constants.js'
// 导入全局组件上传图片
import ImageUpload from '@/components/ImageUpload'
// 数据
export default {
  name: 'questions-new',
  components: { ImageUpload },
  data () {
    return {
      tags: [],
      questionType: -1, // 单选按钮东西
      ruleForm: {
        subjectID: '', // 学科
        catalogID: '', // 目录
        enterpriseID: '', // 企业
        province: '', // 城市
        city: '', // 地区
        direction: '', // 方向
        questionType: '1', // 题型
        difficulty: '1', // 难度
        question: '', // 题干
        options: [{
          code: 'A', // 代码
          title: '', // 标题
          img: '', // 图片URL
          isRight: false // 是否正确答案
        }, {
          code: 'B', // 代码
          title: '', // 标题
          img: '', // 图片URL
          isRight: false // 是否正确答案
        }, {
          code: 'C', // 代码
          title: '', // 标题
          img: '', // 图片URL
          isRight: false // 是否正确答案
        }, {
          code: 'D', // 代码
          title: '', // 标题
          img: '', // 图片URL
          isRight: false // 是否正确答案
        }], // 选项
        videoURL: '', // 解析地址
        answer: '', // 答案解析
        remarks: '', // 题目备注
        tags: '' // 试题标签
      },
      getedForm: {
        subject: [], // 学科
        catalog: [], // 目录
        shortName: [], // 企业
        province: [], // 城市
        city: [], // 地区
        direction: direction, // 方向
        tags: []// 标签
      },
      imageUrl: '',
      xuanxiang: ['E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'],
      rules: {
        subjectID: [
          { required: true, message: '请选择学科', trigger: 'change' }
        ],
        catalogID: [
          { required: true, message: '请选择目录', trigger: 'change' }
        ],
        enterpriseID: [
          { required: true, message: '请选择企业', trigger: 'change' }
        ],
        province: [
          { required: true, message: '请选择', trigger: 'change' }
        ],
        city: [
          { required: true, message: '请选择', trigger: 'change' }
        ],
        direction: [
          { required: true, message: '请选择方向', trigger: 'change' }
        ],
        questionType: [
          { required: true, message: '请选择题型', trigger: 'change' }
        ],
        difficulty: [
          { required: true, message: '请选择难度', trigger: 'change' }
        ],
        question: [
          { required: true, message: '请填写题干', trigger: 'blur' }
        ],
        tags: [
          { required: true, message: '请填写标签', trigger: 'change' }
        ],
        answer: [
          { required: true, message: '请填写答案', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    // 提交表单
    submitForm (formName) {
      this.$refs.ruleForm.validate(async (valid) => {
        if (valid) {
          const ret = await addQuestionsAPI(this.ruleForm)
          if (ret.status === 200) {
            this.$message.success('提交成功')
            this.ruleForm = await this.$options.data().ruleForm
            this.getedForm.city = []
            this.ruleForm.tags = ''
            this.$refs.ruleForm.resetFields()
          } else {
            this.$message.error('提交失败')
          }
        } else {
          this.$message.error('提交失败')
          return false
        }
      })
    },
    // 图片方法
    handleAvatarSuccess (res, file) {
      this.imageUrl = URL.createObjectURL(file.raw)
    },
    beforeAvatarUpload (file) {
      // 1. 验证文件的类型
      const types = ['image/png', 'image/jpeg', 'image/gif']
      if (!types.includes(file.type)) {
        // 选中的文件不是这三种之一
        this.$message.warning('文件格式错误')
        return false
      }

      // 2. 验证文件的大小
      if (file.size / 1024 / 1024 > 1) {
        // 图片超出了1M
        this.$message.warning('图片不可以超出1M')
        return false
      }

      return true
    },
    // 获取学科API
    async getSimpleAPI () {
      // 学科api
      const ret1 = await simpleSubjectsAPI()

      // 企业API
      const ret3 = await listCompanysAPI()
      Promise.all([ret1, ret3]).then(ret => {
        this.getedForm.subject = ret[0].data
        this.getedForm.shortName = ret[1].data.items
      })
    },
    // 城市列表
    setProvince () {
      this.getedForm.city = citys(this.ruleForm.province)
      this.ruleForm.city = ''
    },
    // 地区列表
    // setCity () {
    //   this.getedForm.city = []
    // },
    addQuestionType () {
      if (this.xuanxiang.length === 0) return this.$message.error('没有更多选项了')
      this.ruleForm.options.push({
        code: this.xuanxiang[0], // 代码
        title: '', // 标题
        img: '', // 图片URL
        isRight: false // 是否正确答案
      })
      this.xuanxiang.shift()
    },
    // 图片改变函数
    uodataUrl (url, index) {
      this.ruleForm.options[index].img = url
    },
    // 修改tigs
    setTags () {
      const arr = this.tags.join(',')
      this.ruleForm.tags = arr
    }
  },
  created () {
    // 调用学科列表
    this.getSimpleAPI()
    // 调用城市列表
    this.getedForm.province = provinces()
  },
  watch: {
    // 切换单选多选按钮监测
    'ruleForm.questionType': {
      immediate: true,
      deep: true,
      async handler (val) {
        this.ruleForm.options.map((item, ind) => {
          item.isRight = false
        })
      }
    },
    // 单选按钮检测修改true
    questionType (index) {
      this.ruleForm.options.map((item, ind) => {
        if (index === ind) {
          item.isRight = true
        } else {
          item.isRight = false
        }
      })
    },
    // 深度监听学科
    'ruleForm.subjectID': {
      immediate: true,
      deep: true,
      async handler (val) {
        this.ruleForm.catalogID = ''
        this.ruleForm.tags = ''
        if (val) {
          const ret = await simpleDirectorysAPI({
            subjectID: val
          })
          const ret1 = await simpleTagsAPI({
            subjectID: val
          })
          console.log(ret1)
          this.getedForm.catalog = ret.data
          this.getedForm.tags = ret1.data
        }
      }
    }
  }
}
</script>

<style scoped lang='less'>
.container {
  min-width: 1600px;
  margin: 15px;
  background-color: #fff;
  // 标题样式
  .grid-title {
    padding: 25px;
    border-bottom: 1px solid #ccc;
    font-size: 18px;
  }
  // 主题样式
  .grid-content {
    padding: 50px;
    // 整体下拉菜单
    .select-form-all {
      width: 500px;
    }
    .select-form-item {
      display: flex;
    }
    .select-form-one {
      width: 240px;
    }
    /deep/.form-item-Class {
      height: 100%;
      padding-bottom: 90px;
      .quill-editor {
        height: 300px;
      }
    }

    // 左侧按钮样式
    .elmmentRadio {
      width: 20px;
    }
    // 表单样式
    .elmmentInput {
      width: 300px;
      height: 20px;
    }
    // 上传图片
    .avatar-uploader {
      display: inline-block;
      vertical-align: middle;
      margin-left: 10px;
      /deep/.el-upload {
        width: 146px;
        height: 146px;
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
        &:hover {
          border-color: #409eff;
        }
      }
    }
    .avatar {
      width: 146px;
      height: 146px;
      display: inline-block;
    }
    .form-item-Class {
      ::v-deep.el-form-item__error {
        top: 120%;
      }
    }
  }
}
</style>
